<script lang="ts" setup name="storeDrawer">
import { Search } from "@element-plus/icons-vue";
import { Operation } from "@/api/interface/index";
import { ref } from "vue";
interface Props {
  storeListObject: {
    list: Operation.ResGroupStoreList[];
    total: number;
    pageSize: number;
  };
  isDrawer: boolean;
  groupInfo: any;
  pageNum: number;
}
defineProps<Props>();
interface Emits {
  (
    name: "changeStore",
    value: {
      id: number | string;
      type: string;
    }
  ): void;
  (name: "getStoreList", value: string): void;
  (name: "closeDrawer"): void;
  (name: "handleCurrentChange", e: number): void;
  (
    name: "changeGroup",
    value: {
      id: number;
      type: string;
    }
  ): void;
}
const emits = defineEmits<Emits>();

const searchStoreName = ref();
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer class="drawer-box" :model-value="isDrawer" title="门店信息" @close="emits('closeDrawer')">
    <div style="padding: 0 10px">
      <el-input v-model="searchStoreName" style="width: 70%" placeholder="请输入门店名称">
        <template #append>
          <el-button @click="emits('getStoreList', searchStoreName)" :icon="Search" />
        </template>
      </el-input>
    </div>

    <div class="one" v-if="groupInfo.isCrop">
      <div class="title">总店视角</div>
      <div class="content">
        <div class="group" @click="emits('changeGroup', { id: groupInfo.id, type: 'sum' })">{{ groupInfo.storeName }}</div>
      </div>
    </div>

    <div class="two" v-if="groupInfo.isGroup">
      <div class="title">服务商视角</div>
      <div class="content">
        <div
          class="service"
          @click="emits('changeGroup', { id: groupInfo.id, type: 'group' })"
          style="padding: 5px; font-size: 16px; cursor: pointer"
        >
          {{ groupInfo.storeName }}
        </div>
      </div>
    </div>

    <div class="three" v-if="groupInfo.isGroup || groupInfo.isCrop">
      <div class="title">门店视角</div>
      <div class="store-item">
        <div
          v-for="(item, index) in storeListObject.list"
          :key="item.id"
          @click="emits('changeStore', { id: item.id, type: 'item' })"
          :style="{
            borderColor: groupInfo.currentStoreId === item.id ? '#fdc31d' : 'transparent',
            color: groupInfo.currentStoreId === item.id ? '#fdc31d' : '#959595'
          }"
        >
          {{ item.storeName }}
          <span style="margin-left: 10px" v-if="index !== storeListObject.list.length - 1"> | </span>
        </div>
      </div>
    </div>
    <div style="padding-left: 20px">
      <!-- 分页器 -->
      <el-pagination
        :current-page="pageNum"
        :page-size="storeListObject.pageSize"
        layout="total, prev, pager, next"
        :total="storeListObject.total"
        @current-change="emits('handleCurrentChange', $event)"
      />
      <!-- <el-pagination :page-size="" layout="prev, pager, next" :total="" /> -->
    </div>
  </el-drawer>
</template>

<style lang="scss" scoped>
.drawer-box {
  padding: 10px;
  .title {
    padding-left: 10px;
    margin-top: 20px;
    margin-left: 10px;
    border-left: 2px solid #fdc31d;
  }
  .content {
    padding: 10px;
    font-size: 14px;
    color: #959595;
    .group {
      width: 30%;
      padding: 10px;
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      border: 1px solid #959595;
    }

    // 是否选中
    .group:hover {
      color: #fdc31d;
      border: 1px solid #fdc31d;
    }
    .service:hover {
      color: #fdc31d;
    }
  }
  .store-item {
    display: flex;
    flex-wrap: wrap;

    // align-items: center;
    max-height: 400px;
    overflow-y: auto;
    font-size: 15px;
    color: #959595;
    & > div {
      padding: 10px;
      margin-top: 10px;
      margin-right: 20px;
      cursor: pointer;
      border: 1px solid transparent;
    }
    & > div:hover {
      color: #fdc31d;
      border: 1px solid #fdc31d;
    }
  }
}
</style>
